<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <div class="title-container"><h3 class="title">备授课系统</h3></div>

      <el-form-item prop="logName">
        <span class="svg-container"><svg-icon icon-class="user" /></span>
        <el-input ref="logName" v-model="loginForm.logName" placeholder="请输入登录用户名" name="logName" type="text" tabindex="1" autocomplete="on" clearable />
      </el-form-item>

      <el-form-item prop="logPws">
        <span class="svg-container"><svg-icon icon-class="password" /></span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.logPws"
          :type="passwordType"
          placeholder="请输入登录密码"
          name="logPws"
          tabindex="2"
          clearable
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd"><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /></span>
      </el-form-item>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>

      <div class="tips">
        <span style="margin-right:20px;">学校机构测试帐号: gyyz</span>
        <span>测试密码: a123456</span>
      </div>
      <div class="tips">
        <span style="margin-right:20px;">老师角色测试帐号: gyyz_t1</span>
        <span>测试密码: a123456</span>
      </div>
    </el-form>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
<style lang="scss" scoped src="./index.scoped.scss"></style>
